<template>
  <div class="app-container">
    <div class="searchform">
      <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
        <el-row :gutter="6">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="name" label="快捷入口名称">
              <el-input v-model="search.name" placeholder="快捷入口名称"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="9" :md="6">
            <el-form-item prop="createAt" label="创建日期">
              <el-date-picker
                v-model="search.createAt"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="isShow" label="是否展示">
              <el-select v-model="search.isShow" :clearable="true" placeholder="请选择">
                <el-option v-for="item in isShow" :key="item.code" :label="item.name" :value="item.code">{{
                  item.name
                }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="isExternal" label="是否外部链接">
              <el-select v-model="search.isExternal" :clearable="true" placeholder="请选择">
                <el-option v-for="item in isExternal" :key="item.code" :label="item.name" :value="item.code">{{
                  item.name
                }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <!-- 用户列表 -->
    <div class="table">
      <div class="tableHead">
        <div class="tabletitle">快捷入口维护</div>
        <div class="btnGroup">
          <el-button-group>
            <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
          </el-button-group>
        </div>
      </div>
      <BaseTable v-loading="loading" ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
        <el-table-column label="序号" type="index"/>
        <el-table-column align="center" label="操作" width="300px" class="operation">
          <template slot-scope="scope">
            <el-tooltip class="item" content="编辑" placement="bottom">
              <el-button
                type="text"
                style="font-size: 18px;"
                icon="el-icon-edit-outline"
                @click="edit(scope.row)"/>
            </el-tooltip>
            <el-tooltip class="item" content="详情" placement="bottom">
              <el-button
                type="text"
                style="font-size: 18px;"
                icon="el-icon-tickets"
                @click="detail(scope.row)"/>
            </el-tooltip>
            <el-tooltip class="item" content="展示" placement="bottom">
              <el-button
                v-show="scope.row.IS_SHOW == 10041002"
                type="primary"
                size="mini"
                @click="show(scope.row.ID)">展示</el-button>
            </el-tooltip>
            <el-tooltip class="item" content="撤销" placement="bottom">
              <el-button
                v-show="scope.row.IS_SHOW == 10041001"
                type="primary"
                size="mini"
                @click="hide(scope.row.ID)">撤销</el-button>
            </el-tooltip>
            <el-tooltip class="item" content="上移" placement="bottom">
              <el-button
                type="primary"
                size="mini"
                @click="moveUp(scope.row.ID)">上移</el-button>
            </el-tooltip>
            <el-tooltip class="item" content="下移" placement="bottom">
              <el-button
                type="primary"
                size="mini"
                @click="moveDown(scope.row.ID)">下移</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="NAME" label="快捷入口名称"/>
        <el-table-column prop="IMG" label="快捷入口图片"/>
        <el-table-column prop="LINK" label="快捷入口链接"/>
        <el-table-column prop="IS_EXTERNAL" label="是否外部链接">
          <template slot-scope="scope">
            <span>{{ scope.row.IS_EXTERNAL == 10041001 ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="IS_SHOW" label="是否展示">
          <template slot-scope="scope">
            <span>{{ scope.row.IS_SHOW == 10041001 ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="CREATED_AT" label="创建日期"/>
      </BaseTable>
    </div>
    <!-- 弹框 -->
    <el-dialog
      v-dialogDrag
      ref="quickEntryDialog"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="快捷入口新增"
      width="77%">
      <div class="elform">
        <el-form ref="quickEntrySearchForm" :model="form" :rules="rules" size="mini" label-width="120px">
          <el-row :gutter="8">
            <el-col :xs="24" :sm="24" :md="24">
              <el-form-item prop="name" label="快捷入口图片">
                <el-upload
                  :http-request="handleUploadSuccess"
                  :headers="header"
                  :file-list="imgFile"
                  :on-remove="removeImg"
                  action="#"
                  class="upload-demo"
                  drag
                >
                  <i class="el-icon-upload"/>
                  <div class="el-upload__text">拖拽文件到这里，或<em>点击选择文件</em></div>
                  <div class="el-upload__text">尺寸建议：<em>72px*72px</em></div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24">
              <el-form-item prop="name" label="快捷入口名称">
                <el-input v-model="form.name" placeholder="快捷入口名称" clearable/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24">
              <el-form-item prop="link" label="快捷入口链接">
                <el-input v-model="form.link" placeholder="快捷入口链接" clearable/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24">
              <el-form-item prop="isExternal" label="是否外部链接">
                <el-select v-model="form.isExternal" :clearable="true" placeholder="请选择">
                  <el-option v-for="item in isExternal" :key="item.code" :label="item.name" :value="item.code">{{
                    item.name
                  }}
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" @click="req">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 弹框 -->
    <el-dialog v-dialogDrag :visible.sync="dialogUpVisible" :close-on-click-modal="false" :title="isEdit?'快捷入口信息编辑':'快捷入口信息详情'" width="75%">
      <div class="elform">
        <el-form ref="quickEntryUpForm" :model="upForm" :rules="rules" size="mini" label-width="120px">
          <el-row :gutter="8">
            <el-col :xs="24" :sm="24" :md="24">
              <el-form-item prop="name" label="快捷入口图片">
                <el-upload
                  v-if="isEdit"
                  :http-request="handleUploadSuccess"
                  :headers="header"
                  :file-list="imgFile"
                  :on-remove="removeImg"
                  action="#"
                  class="upload-demo"
                  drag
                >
                  <i class="el-icon-upload"/>
                  <div class="el-upload__text">拖拽文件到这里，或<em>点击选择文件</em></div>
                  <div class="el-upload__text">尺寸建议：<em>72px*72px</em></div>
                </el-upload>
                <el-image
                  v-else
                  :src="upForm.img"
                  style="width: auto; height: 180px"
                  fit="fill"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24">
              <el-form-item prop="name" label="快捷入口名称">
                <el-input :readonly="!isEdit" v-model="upForm.name" placeholder="快捷入口名称" clearable/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24">
              <el-form-item prop="link" label="快捷入口链接">
                <el-input :readonly="!isEdit" v-model="upForm.link" placeholder="快捷入口链接" clearable/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24">
              <el-form-item prop="isExternal" label="是否外部链接">
                <el-select :disabled="!isEdit" v-model="upForm.isExternal" :clearable="true" placeholder="请选择">
                  <el-option v-for="item in isExternal" :key="item.code" :label="item.name" :value="item.code">{{
                    item.name
                  }}
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" @click="reqUp">确 定</el-button>
        <el-button @click="dialogUpVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getQuickEntryList,
  addQuickEntry,
  updateQuickEntry,
  changeQuickEntrySort
} from '@/api/admin/system_settings/gms/quickEntry'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import { quickEntryData } from '../../../../api/admin/system_settings/gms/quickEntry'

export default {
  name: 'QuickEntryManage',
  components: {
    BaseTable
  },
  mixins: [formMixins],
  data() {
    return {
      header: { 'Content-Type': 'multipart/form-data' },
      uploadUrl: '/dmscloud.basedata/commonDatas/file/upload',
      // 查询条件
      search: {
        pageNum: 1,
        limit: 10,
        name: '',
        createAt: '',
        isExternal: '',
        isShow: ''
      },
      isExternal: [{
        code: 10041001,
        name: '是'
      },
      {
        code: 10041002,
        name: '否'
      }
      ],
      isShow: [{
        code: 10041001,
        name: '是'
      },
      {
        code: 10041002,
        name: '否'
      }
      ],
      dialogVisible: false,
      dialogUpVisible: false,
      isEdit: true,
      loading: false,
      id: '',
      table: {},
      reList: [],
      imgFile: [],
      form: {},
      upForm: {
        id: '',
        name: '',
        img: '',
        link: '',
        isExternal: '',
        isShow: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请填写快捷入口名称',
          trigger: 'blur'
        }],
        img: [{
          required: true,
          message: '请填写快捷入口图片',
          trigger: 'blur'
        }],
        link: [{
          required: true,
          message: '请填写快捷入口链接',
          trigger: 'blur'
        }],
        isExternal: [{
          required: true,
          message: '请选择是否为链接',
          trigger: ['change'],
          type: 'number'
        }]
      }
    }
  },
  computed: {},
  mounted() {
    this.searchHandle()
  },
  methods: {
    handleUploadSuccess(param) {
      this.imgFile = []
      this.imgFile[0] = param.file
      console.log(':::handleUploadSuccess:::', this.imgFile)
    },
    removeImg(file, fileList) {
      this.imgFile = []
    },
    // 查询
    searchHandle() {
      this.loading = true
      const table = this.$refs['table']
      getQuickEntryList(this.search)
        .then(res => {
          table.complete().filData(res)
          this.loading = false
        })
        .catch(err => {
          table.complete()
          this.loading = false
        })
    },
    // 新增
    add() {
      this.dialogVisible = true
      this.form = {}
      this.imgFile = []
      this.$nextTick(() => {
        this.$refs.quickEntrySearchForm.clearValidate()
      })
    },
    // 新增保存
    req() {
      this.$refs['quickEntrySearchForm'].validate((valid) => {
        if (valid) {
          var form = new FormData()
          form.append('imgFile', this.imgFile[0])
          addQuickEntry(this.form, form)
            .then(() => {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.clear()
            })
            .catch(err => {
            })
        }
      })
    },
    edit(row) {
      this.imgFile = []
      quickEntryData(row.ID)
        .then((res) => {
          this.upForm.id = res.ID
          this.upForm.name = res.NAME
          this.upForm.img = res.IMG
          this.upForm.link = res.LINK
          this.upForm.isExternal = res.IS_EXTERNAL
          this.dialogUpVisible = true
          this.isEdit = true
        })
        .catch(err => {
        })
    },
    detail(row) {
      quickEntryData(row.ID)
        .then((res) => {
          this.upForm.id = res.ID
          this.upForm.name = res.NAME
          this.upForm.img = res.IMG
          this.upForm.link = res.LINK
          this.upForm.isExternal = res.IS_EXTERNAL
          this.dialogUpVisible = true
          this.isEdit = false
        })
        .catch(err => {
        })
    },
    show(id) {
      const item = {
        id: id,
        isShow: 10041001
      }
      updateQuickEntry(item)
        .then(() => {
          this.$message({
            type: 'success',
            message: '展示成功!'
          })
          this.searchHandle()
        })
        .catch(err => {
        })
    },
    hide(id) {
      const item = {
        id: id,
        isShow: 10041002
      }
      updateQuickEntry(item)
        .then(() => {
          this.$message({
            type: 'success',
            message: '撤销成功!'
          })
          this.searchHandle()
        })
        .catch(err => {
        })
    },
    moveUp(id) {
      const item = {
        id: id,
        moveType: 'up'
      }
      changeQuickEntrySort(item)
        .then(() => {
          this.$message({
            type: 'success',
            message: '上移成功!'
          })
          this.searchHandle()
        })
        .catch(err => {
        })
    },
    moveDown(id) {
      const item = {
        id: id,
        moveType: 'down'
      }
      changeQuickEntrySort(item)
        .then(() => {
          this.$message({
            type: 'success',
            message: '下移成功!'
          })
          this.searchHandle()
        })
        .catch(err => {
        })
    },
    reqUp() {
      this.$refs['quickEntryUpForm'].validate((valid) => {
        if (valid) {
          var form = new FormData()
          form.append('imgFile', this.imgFile[0])
          updateQuickEntry(this.upForm, form)
            .then(() => {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.clear()
            })
            .catch(err => {
            })
        }
      })
    },
    // 返回清空列表
    clear() {
      this.dialogVisible = false
      this.dialogUpVisible = false
      this.form = {}
      this.searchHandle()
    }
  }

}

</script>

<style lang="scss" scoped>
::v-deep {
  .el-upload{
    width: 100% !important;
  }
  .el-upload-dragger {
    width: 100% !important;
  }
}
</style>
